Menú Simple Tabs con CSS

Título del blog

• Enlace 1
• Enlace 2
• Enlace 3
• Enlace 4

Los menús son una pieza clave en cualquier blog, ayudan al visitante a navegar mejor por la página y al mismo tiempo dan un aspecto más organizado.
En Vagabundia vi el otro día un menú vertical muy vistoso creado con CSS mi debilidad, porque todo lo que no requiere alojar archivos externos siempre nos dará mejor resultado tanto para personalizar como para el tiempo de carga de la página.
De la misma página que proporciona J.Miur me ha gustado mucho este otro menú, es Simple Tabs y como su nombre indica es un menú creado con tabs lo que comúnmente conocemos por pestañas.

Para añadirlo a nuestro blog necesitaremos situarnos en Edición de HTML y justo antes de ]]></b:skin> añadimos lo siguiente:

[+/-]Ver código

h1#cst a {
color : #fff;
display : block;
width : 600px;
height : 150px;
padding : 10px;
background : #669900 url(http://img120.imageshack.us/img120/9563/cstmastheadzn6.jpg) no-repeat bottom right;
border : 1px solid #000;
text-decoration : none;
font-size : 90%;
font-weight : normal;
margin : auto;
}
ul.cst {
margin : auto;
width : 600px;
}
h1#cst a:hover, h1#cst a:focus, h1#cst a:active {
color : #414C32;
}
h1#cst a:focus, h1#cst a:active {
text-decoration : underline;
}
ul.cst li {
display : inline;
float : left;
}
h1#cst {
margin: 0 !important;
}

ul.cst li a, ul.cst li.on {
background : #e5cb7d url(http://img389.imageshack.us/img389/4155/cstshadowovergc9.jpg) repeat-x top left;
border : 1px solid #333;
border-top : 0;
color: #758B62;
cursor: pointer;
display: block;
height: 32px;
line-height: 32px;
margin: 0 2px 0;
padding: 0 8px 0 18px;
text-align:center;
text-decoration:none;
white-space:nowrap;
width:auto;
}

ul.cst li.on {
background-color:#669900;
background-image:none;
border: 1px solid #000;
border-top: 1px solid #669900;
color:#FFFFFF;
cursor:default;
margin-top:0;
white-space:nowrap;
margin-top: -1px;
height: 33px;
}

ul.cst li a:hover, ul.cst li a:focus, ul.cst li a:active {
color : #000;
ul.cst li a:focus, ul.cst li a:active {
text-decoration : underline;
}

En este código que añadimos a la plantilla es donde podemos modificar algunas cosas del menú por ejemplo la imagen, la original mide 600x150 y la podemos sustituir en "h1#cst a" donde background :#669900 url(http://img120.imageshack.us/img120/9563/cstmastheadzn6.jpg) aunque no se aprecia hay un color de fondo en tono verde igual a la imagen del menú que podemos cambiar en :#669900.

Si decidimos cambiar la imagen del menú seguramente también nos gustaría modificar el color de la 2ª tabs, lo haremos en "ul.cst li.on" donde background-color : #669900;
Las otras tabs las podríamos modificar en "ul.cst li a, ul.cst li.on" donde dice background : #ffffdd.

Hay otra imagen en el menú, es la sombra que produce el efecto hover en las tabs la encontraremos en:
ul.cst li a:hover, ul.cst li a:focus, ul.cst li a:active {
color : #000;background : #e5cb7d url(http://img389.imageshack.us/img389/4155/cstshadowovergc9.jpg) repeat-x top left;
}

Las medidas las podemos adecuar a nuestro gusto en h1#cst a variando width:600px; y
height:150px; teniendo cuidado que entonces añadiremos en "ul.cst" el mismo valor de width que en "h1#cst" con padding lo que haremos aumentar en alto de la imagen.

Guardamos los cambios y nos situamos en Plantilla/Añadir gadget /HTML/Javascript incluimos en su interior el siguiente código:

<h1 id="cst"><a href="url-enlace">Título del blog</a></h1>
<ul class="cst">
<li><a href="url-enlace">Page 1</a></li>
<li class="on">Page 2</li>
<li><a href="url-enlace">Page 3</a></li>
<li><a href="url-enlace">Page 4</a></li>
<li><a href="url-enlace">Page 5</a></li>
</ul>

Donde "url-enlace" añadiremos la url de la página que vamos a enlazar.
En la pestaña nº2 donde dice "on" no añadiremos nada.
El texto de Page 1-3-4-5 lo sustituimos por el texto a enlazar.
El menú con las medidas proporcionadas queda más o menos así.